<script lang="ts">
import {defineComponent} from 'vue'
import { getDictItemsFromCache } from "../../utils/dict";

export default defineComponent({
  name: "selectDict",
  props: {
    dictCode: String,
    value: [String, Number],
    emptyOption: {
      default: true,
      type: Boolean
    }
  },
  data(){
    return {
      selectOptions: [],
    }
  },
  watch:{
    dictCode:{
      immediate:true,
      handler() {
        this.initDictData()
      },
    }
  },
  methods: {
    initDictData() {
      if(getDictItemsFromCache(this.dictCode)){
        this.selectOptions = getDictItemsFromCache(this.dictCode);
        return
      }
    },
    handleInput(value) {
      this.$emit('update:value', value)
    }
  }
})
</script>

<template>
  <a-select :value="value" placeholder="please select" @change="handleInput">
    <a-select-option v-if="emptyOption" value="">none</a-select-option>
    <a-select-option v-for="item in selectOptions" :key="item.dictValue" :value="item.dictValue">{{ item.dictLabel }}</a-select-option>
  </a-select>
</template>

<style scoped lang="scss">

</style>
